<template>
	<div v-loading="loading">
		<div class="title1">
			<div>
				<span class="h1">基础管理</span>
				<span class="h2">系统选项</span>
			</div>
		</div>
		<div class="con">
			<div style="margin-top: 10px; padding-bottom: 100px;overflow: auto">
				<el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
					<el-table-column type="index" width="50">
					</el-table-column>
					<el-table-column property="OName" label="选项名称">
					</el-table-column>
					<el-table-column property="ODescript" label="选项描述">
					</el-table-column>
					<el-table-column property="OValue" label="选项值">
					</el-table-column>
					<el-table-column property="Memo" label="备注">
					</el-table-column>
					<el-table-column property="address" label="操作" width="240">
						<template slot-scope="scope">
							<el-button size="small" type="info" @click="modify(scope.row.OptionID,scope.row.OValue,scope.row.OName,scope.row.ODescript)">修改</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="float: right; margin-top: 10px;margin-right: 5px;">
					<el-pagination :current-page="pageindex" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<div class="edit" v-if="dialogVisible">
			<el-dialog title="系统选项" :visible.sync="dialogVisible" size="tiny" :before-close="handleClose">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="系统选项:">
						<el-input v-model="form.OName" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="选项描述:">
						<el-input v-model="form.ODescript" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="选项值:">
						<el-input v-model="form.OValue"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="setoption()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import api from '../../kits/api.js';
export default {
	name: 'sys',
	data() {
		return {
			pageindex:1,
			loading:true,
			form: {//弹框值
				OName: '',
				ODescript: '',
				OValue: ''
			},
			showEdit: false,//显示编辑
			tableData: [],//数据
			currentRow: null,
			dialogVisible: false,
			total:1,//页码
			id:'',//全局id
		}
	},
	created(){
		this.getoptions()
	},
	mounted: function() {

	},
	methods: {
		handleCurrentChange(val) {
			this.currentRow = val;
		},
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done();
				})
				.catch(_ => { });
		},
		//修改弹框
		modify(id,OValue,OName,ODescript){
			this.form.OName = OName
			this.form.ODescript = ODescript
			this.id=id;
			this.form.OValue = OValue
			this.dialogVisible=true
		},
		//获取系统选项
		getoptions(){
			this.loading = true
			this.$axios.get(api.getoptions).then((res)=> {
				if(res.data.isOK){
					this.loading = false
					this.tableData=res.data.data
					this.total = this.tableData.length
				}else{
					if(res.data.msg == "Token无效" || res.msg=="Token缺失"){
							this.$router.push({
									path: '/login'
						})
					}
					else{
						this.loading = false
						this.$message.error(res.data.msg);
					}	
				}
				
            });
		},
		//设置选项值
		setoption(){
			this.loading = true
			this.$axios.post(api.setoption,
				{
				  "Key": this.id,
				  "KeyValue": this.form.OValue
				}).then((res)=> {
					if(res.data.isOK){
						this.loading = false
						this.$message({
				          message: '修改成功',
				          type: 'success'
				       });
						this.dialogVisible=false
						this.getoptions()
					}else{
						if(res.data.msg == "Token无效" || res.msg=="Token缺失"){
							this.$router.push({
									path: '/login'
							})
						}
						else{
							this.loading = false
							this.dialogVisible=false
							this.$message.error(res.data.msg);
						}	
						
					}
				
           }).catch(function(){
            });
		}
	}
}
</script>

<style>
.title1 {
	width: 100%;
	padding: 15px 0;
	text-indent: 20px;
	background: #fff;
	border-bottom: 1px solid #dddee1;
}

.title1 span {
	margin-right: 10px;
}

.title1 .h1 {
	font-size: 16px;
	font-weight: 600;
}

.title1 .h2 {
	font-size: 14px;
}

.con {
	width: 100%;
	margin-top: 10px;
}

.page {
	float: right;
	margin-top: 20px;
}
</style>